<template>
	<view class="classLayout pageBg">
		<custom-nav-bar title="分类"></custom-nav-bar>
		<view class="classify">
			<theme-item v-for="item in themeList" :key="item.id" v-bind="item"></theme-item>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app";

//分享给好友
onShareAppMessage((e)=>{
	return {
		title:"小秋壁纸，精选分类！",
		path:"/pages/classify/classify"
	}
})

//分享朋友圈
onShareTimeline(()=>{
	return {
		title:"小秋壁纸，精选分类！"
	}
})

const themeList = ref([
  { id: 1, image: '/static/images/fj3.jpg', category: '风景', updateTime: '3天前更新' },
  { id: 2, image: '/static/images/fj4.jpg', category: '山水', updateTime: '5天前更新' },
  { id: 3, image: '/static/images/jz2.jpg', category: '建筑', updateTime: '1周前更新' },
  { id: 4, image: '/static/images/jz3.jpg', category: '古楼', updateTime: '2周前更新' },
  { id: 5, image: '/static/images/jz4.jpg', category: '艺术', updateTime: '1个月前更新' },
  { id: 6, image: '/static/images/ly2.jpg', category: '风情', updateTime: '2个月前更新' },
  { id: 7, image: '/static/images/ly3.jpg', category: '城市', updateTime: '3个月前更新' },
  { id: 8, image: '/static/images/rw3.jpg', category: '人文', updateTime: '半年前更新' },
  { id: 9, image: '/static/images/rw4.jpg', category: '艺术', updateTime: '1年前更新' },
  { id: 10, image: '/static/images/tc2.jpg', category: '旅游', updateTime: '1天前更新' },
  { id: 11, image: '/static/images/tc3.jpg', category: '彩瓷', updateTime: '4天前更新' },
  { id: 12, image: '/static/images/ww2.jpg', category: '历史', updateTime: '2周前更新' },
  { id: 13, image: '/static/images/ww3.jpg', category: '文化', updateTime: '1个月前更新' },
  { id: 14, image: '/static/images/ly4.jpg', category: '地标', updateTime: '3天前更新' },
  { id: 15, image: '/static/images/ly5.jpg', category: '小巷', updateTime: '5天前更新' },
  { id: 16, image: '/static/images/tc4.jpg', category: '陶瓷', updateTime: '1天前更新' },
  { id: 17, image: '/static/images/ww4.jpg', category: '瓷器', updateTime: '半年前更新' }
])
</script>

<style lang="scss" scoped>
.classify{
	padding: 30rpx;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 15rpx;
}
</style>
